<template>
	<view class="user">
		<view class="header">
			<view class="status_bar">
				<!-- 这里是状态栏 -->
			</view>
			<view class="title">我的</view>

			<view class="user-card">
				<template v-if="isLogin">
					<image
						:src="
							userData.avatar
								? `https://www.aikoolearn.com/video-dev${userData.avatar}`
								: 'https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user-avatar.png'
						"
						mode=""
					></image>
					<view class="card-right">
						<view class="user-name">{{ userData.nickName }}</view>
						<view class="wx-id">
							ID：{{ userData.kxId }}
							<image @click="updateUser" src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/edit.png" mode="" class="edit-img"></image>
						</view>
					</view>
				</template>
				<template v-else>
					<view @click="login">登录</view>
				</template>
			</view>
		</view>
		<view class="content">
			<wu-cell title="我的学校" :value="userData.deptName || ''">
				<image class="icon-user" slot="icon" src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user/school.png" mode=""></image>
			</wu-cell>
			<wu-cell title="我的排名" isLink @click="goLeaderBoard">
				<image class="icon-user" slot="icon" src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user/paihang.png" mode=""></image>
			</wu-cell>
			<wu-cell isLink>
				<image class="icon-user" slot="icon" src="https://manage.aikoolearn.com/video-api/profile/upload/common/WXAPP/img/user/share.png" mode=""></image>
				<button open-type="share" slot="title" class="share-btn">分享给好友</button>
			</wu-cell>
		</view>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="froms">
					<!-- 	<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image v-if="from.avatar" class="avatar" :src="`https://www.aikoolearn.com/video-dev${from.avatar}`"></image>
						<view class="title-upload" v-else>点击上传头像</view>
					</button> -->

					<uni-forms :modelValue="from" :rules="rules" ref="form">
						<uni-forms-item required name="avatar">
							<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image v-if="from.avatar" class="avatar" :src="`https://www.aikoolearn.com/video-dev${from.avatar}`"></image>
								<view class="title-upload" v-else>点击上传头像</view>
							</button>
						</uni-forms-item>
						<uni-forms-item required label="昵称" name="nickName">
							<uni-easyinput v-model="from.nickName" type="nickname" placeholder="请输入昵称" @blur="getnickname" />
							<!-- <input type="nickname" v-model="from.wxName" class="weui-input" @blur="getnickname" placeholder="请输入昵称" /> -->
						</uni-forms-item>
						<uni-forms-item label="手机号" name="phonenumber">
							<uni-easyinput type="number" v-model="from.phone" placeholder="请输入手机号码" />
						</uni-forms-item>
						<uni-forms-item required name="province" label="省份" v-if="!userData.province">
							<zxz-uni-data-select v-model="from.province" filterable :localdata="provinceData"></zxz-uni-data-select>
						</uni-forms-item>
						<uni-forms-item required name="deptId" label="学校" v-if="!userData.deptId">
							<zxz-uni-data-select v-model="from.deptId" filterable :localdata="schcoolData"></zxz-uni-data-select>
						</uni-forms-item>
					</uni-forms>
					<button @click="submit" style="width: 300rpx; background-color: #05c7ac; color: #fff; height: 84rpx; line-height: 84rpx">保存</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { getWechatLogin, getUser, getSchool, postUser } from '@/services/login.js';
import { getChuangWords } from '@/services/wordbreak.js';
export default {
	data() {
		return {
			provinceData: [
				{ text: '河北省', value: '河北' },
				{ text: '山西省', value: '山西' },
				{ text: '辽宁省', value: '辽宁' },
				{ text: '吉林省', value: '吉林' },
				{ text: '黑龙江省', value: '黑龙江' },
				{ text: '江苏省', value: '江苏' },
				{ text: '浙江省', value: '浙江' },
				{ text: '安徽省', value: '安徽' },
				{ text: '福建省', value: '福建' },
				{ text: '江西省', value: '江西' },
				{ text: '山东省', value: '山东' },
				{ text: '河南省', value: '河南' },
				{ text: '湖北省', value: '湖北' },
				{ text: '湖南省', value: '湖南' },
				{ text: '广东省', value: '广东' },
				{ text: '海南省', value: '海南' },
				{ text: '四川省', value: '四川' },
				{ text: '贵州省', value: '贵州' },
				{ text: '云南省', value: '云南' },
				{ text: '陕西省', value: '陕西' },
				{ text: '甘肃省', value: '甘肃' },
				{ text: '青海省', value: '青海' },
				{ text: '台湾省', value: '台湾' },
				{ text: '内蒙古自治区', value: '内蒙古' },
				{ text: '广西壮族自治区', value: '广西' },
				{ text: '西藏自治区', value: '西藏' },
				{ text: '宁夏回族自治区', value: '宁夏' },
				{ text: '新疆维吾尔自治区', value: '新疆' },
				{ text: '北京市', value: '北京' },
				{ text: '天津市', value: '天津' },
				{ text: '上海市', value: '上海' },
				{ text: '重庆市', value: '重庆' },
				{ text: '香港特别行政区', value: '香港' },
				{ text: '澳门特别行政区', value: '澳门' }
			],
			userData: [
				{
					name: '我的学校',
					icon: '/static/img/user/school.png',
					url: '/pages/user/school',
					isLink: false
				},
				{
					name: '地址管理',
					icon: '/static/img/user/path.png',
					url: '/pages/user/path',
					isLink: true
				},
				{
					name: '我的奖品',
					icon: '/static/img/user/gift.png',
					url: '/pages/user/school',
					isLink: true
				},
				{
					name: '分享给好友',
					icon: '/static/img/user/share.png',
					url: '/pages/user/school',
					isLink: true
				},
				{
					name: '联系客服',
					icon: '/static/img/user/phone.png',
					url: '/pages/user/phone',
					isLink: true
				}
			],
			userData: {},
			from: {},
			rules: {
				avatar: {
					rules: [
						{
							required: true,
							errorMessage: '请上传头像'
						}
					]
				},
				// 对name字段进行必填验证
				nickName: {
					rules: [
						{
							required: true,
							errorMessage: '请输入昵称'
						}
					]
				},
				deptId: {
					rules: [
						{
							required: true,
							errorMessage: '请绑定学校'
						}
					]
				},
				province: {
					rules: [
						{
							required: true,
							errorMessage: '请绑定省份'
						}
					]
				}
			},
			isLogin: false,
			schcoolData: [
				{ value: 0, text: '篮球' },
				{ value: 1, text: '足球' },
				{ value: 2, text: '游泳' }
			]
		};
	},
	onShow() {
		this.getSchoolData();
		this.userData = wx.getStorageSync('userInfo');
		this.isLogin = wx.getStorageSync('isLogin');
	},
	computed: {
		// isLogin() {
		// 	return wx.getStorageSync('isLogin');
		// }
		// userInfo() {
		// 	return wx.getStorageSync('userInfo');
		// }
	},
	methods: {
		async getChuangWordsData() {
			const res = await getChuangWords();
			if (res.code == 200) {
				let item = {
					stage: res.data.stage,
					libId: res.data.libId
				};
				uni.navigateTo({
					url: '/pages/ingame/leaderBoard?item=' + JSON.stringify(item)
				});
			} else {
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		getnickname(e) {
			this.$set(this.from, 'nickname', e.detail.value);
		},
		updateUser() {
			this.$set(this.from, 'nickName', this.userData.nickName);
			this.$set(this.from, 'phone', this.userData.phone);
			this.$set(this.from, 'avatar', this.userData.avatar);
			this.$refs.popup.open();
		},
		goLeaderBoard() {
			this.getChuangWordsData();
		},
		onChooseAvatar(e) {
			console.log(e, 'e');
			const { avatarUrl } = e.detail;
			let that = this;
			let token = uni.getStorageSync('Authorization');
			uni.uploadFile({
				//请求的url接口地址
				url: 'https://mobile.aikoolearn.com/video-dev' + '/common/upload', //真实的接口地址

				fileType: 'image', //图片类型
				filePath: avatarUrl, //哪张图片
				name: 'file', //对应接口的文件名称
				header: {
					//请求头
					Authorization: token
				},
				success: (res) => {
					console.log(res, '上传后的结果');
					console.log(res, '上传后的结果');
					let file = res.data;
					file = JSON.parse(file);
					this.$set(this.from, 'avatar', file.fileName);
				},
				fail: (err) => {
					//上传图片失败失败的回调
					console.log(err);
				}
			});
		},
		async postUserData() {
			const res = await postUser(this.from);
			if (res.code == 200) {
				this.$refs.popup.close();
				this.getUserInfoData();
			} else {
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		submit() {
			console.log(this.userInfo, 'userindo');
			this.$refs.form
				.validate()
				.then((res) => {
					console.log('表单数据信息：', res);
					this.postUserData();
				})
				.catch((err) => {
					console.log('表单错误信息：', err);
				});
		},
		async getSchoolData() {
			const res = await getSchool();
			if (res.code == 200) {
				this.schcoolData = res.data.map((item) => ({
					value: item.deptId,
					text: item.deptName
				}));
				console.log(this.schcoolData, 'ddd');
			}
		},
		//登录
		login() {
			wx.login({
				provider: 'weixin',
				success: async (loginRes) => {
					console.log(loginRes, 'loginres');
					let code = loginRes.code;
					this.getCode(code);
				}
			});
			// 1.wx获取登录用户code
		},
		async getCode(code) {
			const res = await getWechatLogin(code);
			if (res.code == 200) {
				console.log('寄哪里了');
				wx.setStorageSync('Authorization', res.token);
				wx.setStorageSync('isLogin', true);
				this.getUserInfoData();
				wx.showToast({
					title: '登录成功',
					icon: 'none',
					duration: 2000
				});
			} else {
				//登录失败
				wx.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				});
			}
		},
		async getUserInfoData() {
			const res = await getUser();
			if (res.code == 200) {
				this.userData = res.data;
				this.isLogin = true;
				wx.setStorageSync('userInfo', res.data);
				if (!res.data.deptId) {
					this.$refs.popup.open();
				}
			}
		}
	}
};
</script>

<style scoped lang="scss">
.user {
	background-color: #f0f2f5;
	height: 100vh;
	.header {
		width: 100%;
		height: 480rpx;
		background: linear-gradient(180deg, #d3f0e8 0%, #f0f2f5 100%);

		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.title {
			height: 95.42rpx;
			line-height: 150.588rpx;
			text-align: center;
			font-size: 32rpx;
			color: #000000;
		}
	}
	.share-btn {
		width: 100%;
		text-align: left;
		// border: none !important;
		border-color: transparent;
		background-color: transparent;
		border-color: transparent;
		padding: 0;
		margin: 0;
		outline: none;
		font-size: 30rpx;
		color: #303133;
	}
	button::after {
		width: 100rpx;
		padding: 0;
		margin: 0;
		border: none;
	}
	.user-card {
		width: 702rpx;
		height: 200rpx;
		box-sizing: border-box;
		padding: 40rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin: 50rpx auto;
		display: flex;
		align-items: center;

		image {
			width: 121rpx;
			height: 121rpx;
			border-radius: 50%;
		}
		.card-right {
			margin-left: 32rpx;
			position: relative;
			.user-name {
				font-size: 40rpx;
				font-weight: 500;
			}
			.wx-id {
				color: #b3b3b3;
				font-size: 28rpx;
				margin-top: 8rpx;
				display: flex;
				align-items: center;
			}
		}
	}

	.content {
		width: 702rpx;
		// height: 724rpx;
		background: #ffffff;
		border-radius: 24rpx;
		margin: 0 auto;
	}
	.edit-img {
		width: 42rpx !important;
		height: 42rpx !important;
		margin-left: 30rpx;
	}
	.icon-user {
		width: 60rpx;
		height: 60rpx;
	}
	.froms {
		width: 650rpx;
		padding: 40rpx;
		box-sizing: border-box;
		.avatar-wrapper {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 40rpx;
			padding: 0 !important;
			image {
				width: 100%;
				height: 100%;
			}
		}
	}
	.title-upload {
		line-height: 200rpx;
		text-align: center;
		color: #c6c1c1;
		font-size: 25rpx;
	}

	::v-deep {
		.is-required {
			display: none;
		}
		.wu-line {
			display: none;
		}
	}
}
</style>
